<script lang="ts" setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Setting,
  StarFilled,
  SwitchButton,
  Avatar,
  User,
  Menu,
  DocumentAdd,
  ArrowLeftBold,
  ArrowRightBold,
} from '@element-plus/icons-vue';
import eventBus from '@/libs/eventBus';
import avatarSrc from "@/assets/img/vuelogo.png"
import router from '@/router';
import { logOut } from '@/api/users'
import { useTokenStore } from '@/stores/mytoken'

const store = useTokenStore()
const props = defineProps(['mList2'])
// const avatarSrc = "@/assets/img/vuelogo.png"
let imgSrc = ref(avatarSrc)
const userInfo = ref<any>({})
const isCollapse = ref(false)
let lv0MenuList = ref<Array<string | number | any>>([]);

const toggleMenu = () => {
  isCollapse.value = !isCollapse.value
}
const addTabPages = (title: string, id: string, url: string) => {
  eventBus.emit('addPage', [title, id,url]);
}
const setUserPage = (title: string, id: string, url: string) => {
  eventBus.emit('setPage', [title, id, url]);
}
watch(props, (newValue, oldValue) => {
  nextTick(() => {
    
    lv0MenuList.value = newValue['mList2']['children']
    if (window.localStorage.getItem("userInfo")) {
      userInfo.value = JSON.parse(window.localStorage.getItem("userInfo")||"{}");
    }
  })
}, {
  immediate: true,
  deep: true,
})
const logOut0 = () => {
  store.saveToken("")
  router.push('/login');
}
onMounted(() => {
  store.saveUser(JSON.parse(window.localStorage.getItem("userInfo")||"{}"))
});
</script>

<template>
  <div class="asideMenu">
    <el-menu default-active="1" class="el-menu-vertical-demo" :collapse="isCollapse" :router="true" unique-opened>
      <template v-for="item in lv0MenuList" :key="item['id']">
        <el-sub-menu :index="item['name']" v-if="item.children.length != 0">
          <template #title>
            <el-icon>
              <Menu />
            </el-icon>
            <span>{{ item['name'] }}</span>
          </template>
          <el-menu-item v-for="item2 in item.children" :key="item2['id']" @click="addTabPages(item2['name'], item2['id'],item2['url'])"
            :index="item['url']">
            <el-icon>
              <DocumentAdd />
            </el-icon>
            <template #title>{{ item2['name'] }}</template>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item @click="addTabPages(item['name'], item['id'],item['url'])" :index="item['url']" v-else>
          <el-icon>
            <DocumentAdd />
          </el-icon>
          <template #title>{{ item['name'] }}</template>
        </el-menu-item>
      </template>
      <div class="user-info" v-if="!isCollapse">
        <el-divider></el-divider>
        <div class="user-avatar">
          <el-avatar shape="square" :src="avatarSrc" />
          <div class="user-dept">
            <span class="name">{{ userInfo['realname'] }}</span>
            <span>{{ userInfo['dept'] }}</span>
          </div>
        </div>
        <div class="user-buttons">
          <el-menu-item :icon="Setting" @click="setUserPage('设置用户','setUser000000000','setUser')" index="setUser">设置</el-menu-item>
          <el-menu-item :icon="SwitchButton" @click="logOut0">退出</el-menu-item>
        </div>
      </div>
    </el-menu>
    <el-button class="switchBtn" @click="toggleMenu">
      <el-icon v-if="!isCollapse">
        <ArrowLeftBold />
      </el-icon>
      <el-icon v-if="isCollapse">
        <ArrowRightBold />
      </el-icon>
    </el-button>
  </div>
</template>

<style lang="scss" scoped>
.asideMenu {
  position: relative;
  height: 100%;
  color: #fff;
  background-color: #263238;
  overflow-x: hidden;
  margin: 0;
  padding: 0;

  .el-menu {
    color: #fff;
    background-color: #263238;

    .el-sub-menu,
    .el-sub-menu span,
    .el-sub-menu .el-icon,
    .el-sub-menu .el-menu-item-group,
    .el-menu-item {
      color: #fff;
      background-color: #263238;
    }

    .el-sub-menu {
      &:hover {
        background-color: #263238;
      }

      .el-sub-menu__title {
        background-color: transparent;

        &:hover {
          color: #263238;

          span,
          i {
            color: #263238;
          }
        }

        span,
        i {
          background-color: transparent;

          &:hover {
            color: #263238;
          }
        }

        .el-sub-menu__icon-arrow {
          color: #fff;

          &:hover {
            color: #263238;
          }
        }
      }
    }

    .el-sub-menu:hover {
      color: #c3ba09;
      background-color: #aaa;
    }

    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
      color: #fff;
      background-color: #263238;
    }
  }

  .el-menu-vertical-demo {
    overflow-y: scroll;
    max-height: 70%;
  }

  .switchBtn {
    position: absolute;
    width: fit-content;
    color: #fff;
    right: 0;
    top: 50%;
    padding: 10px 10px 10px 13px;
    background-color: #3d4f58;
    border-radius: 50% 0 0 50%;
  }

  .user-info {
    height: 15%;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;

    .el-divider {
      width: 120% !important;
      margin: 0;
      padding: 0;
      background-color: transparent;
      position: absolute;
      left: 0;
    }

    .user-avatar {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 10px 0;
      padding: 0;

      .el-avatar {
        width: 40px;
        height: 40px;
        background-color: transparent !important;
      }

      .user-dept {
        display: flex;
        flex-direction: column;

        span {
          font-size: 12px;
        }

        .name {
          font-size: 16px;
        }
      }
    }

    .user-buttons {
      display: flex;
      padding: 5px;

      .el-button {
        width: 60px;
        font-size: 14px;
        color: #fff;
        background-color: transparent;
        border: 0;
      }
    }
  }

}</style>
